<template>
  <ve-card type="none">
    <ve-form-item label="关联单据类型" prop="refCostType" required>
      <text v-if="routeQuery.costParams || routeQuery.orderParams" style="color: #cdced0">
        {{ routeQuery.costParams ? '关联工单' : '关联业务单' }}
      </text>
      <ve-picker-inline
        v-else
        v-model="form.refCostType"
        placeholder="请选择"
        :range="dict.refCostType"
        unit="arrowRight"
        @change="changeRefCostType"
      >
      </ve-picker-inline>
    </ve-form-item>
    <template v-if="form.refCostType == 1">
      <ve-form-item label="关联工单类型" prop="workType" required>
        <text v-if="routeQuery.costParams" style="color: #cdced0">{{ form.workTypeName }}</text>
        <ve-picker-inline
          v-else
          v-model="form.workType"
          placeholder="请选择"
          :range="dict.workType"
          unit="arrowRight"
          @change="changeWorkInfo"
        >
        </ve-picker-inline>
      </ve-form-item>
      <ve-form-item label="关联工单号" prop="workId" required>
        <text v-if="routeQuery.costParams" style="color: #cdced0">{{ form.workCode }}</text>
        <template v-else>
          <ve-input v-if="!form.workType" placeholder="请先选择关联工单类型" disabled :allowClear="false" />
          <remote-select
            v-else
            :disabled="routeQuery.costParams"
            type="getWorkCode"
            v-model="form.workId"
            :label="form.workCode"
            @change="changeWorkFn"
            :params="{
              workTypeList: [form.workType],
              workOperatorList: [form.loginUserId],
            }"
          />
        </template>
      </ve-form-item>
      <ve-form-item label="关联业务单信息">
        <text style="color: #cdced0">{{ form.workInfo }}</text>
      </ve-form-item>
    </template>
    <template v-if="form.refCostType == 2">
      <ve-form-item label="关联业务类型" prop="businessType" required>
        <text v-if="routeQuery.orderParams" style="color: #cdced0">{{ form.businessTypeName }}</text>
        <ve-picker-inline
          v-else
          v-model="form.businessType"
          placeholder="请选择"
          :range="dict.businessType"
          unit="arrowRight"
          @change="changeBusinessInfo"
        >
        </ve-picker-inline>
      </ve-form-item>
      <ve-form-item label="关联业务单号" prop="businessId" required>
        <text v-if="routeQuery.orderParams" style="color: #cdced0">{{ form.businessCode }}</text>
        <template v-else>
          <ve-input v-if="!form.businessType" placeholder="请先选择关联业务单类型" disabled :allowClear="false" />
          <remote-select
            v-if="form.businessType == 1"
            v-model="form.businessId"
            type="getShortCode"
            :label="form.businessCode"
            @change="changeBusinessFn"
          />
          <remote-select
            v-if="form.businessType == 2"
            v-model="form.businessId"
            type="getLongCode"
            :label="form.businessCode"
            @change="changeBusinessFn"
          />
        </template>
      </ve-form-item>
    </template>
    <ve-form-item label="承租人信息" v-if="form.refCostType == 1 || form.refCostType == 2">
      <text style="color: #cdced0">{{ form.memberInfo }}</text>
    </ve-form-item>
    <ve-form-item label="费用产生门店" :borderBottom="false" prop="feeOrgId" required>
      <text v-if="form.refCostType !== 3" style="color: #cdced0">{{ form.feeOrgName }}</text>
      <remote-select @change="changeOrg" v-else v-model="form.feeOrgId" :label="form.feeOrgName" type="org_add_listByStaff" />
    </ve-form-item>
  </ve-card>
</template>

<script setup>
  import { ref, inject } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { usePageDict } from '@/hooks/useDict'

  const dict = usePageDict('costToListDict')

  const form = inject('form')

  const emit = defineEmits(['getRefCarInfoList'])
  const props = defineProps({
    routeQuery: {
      type: Object,
      default: () => {},
    },
  })

  // 更改关联单据类型
  const changeRefCostType = () => {
    form.value.workType = ''
    changeWorkInfo()
    changeBusinessInfo()
  }

  // 改变关联工单类型，清空级联信息
  const changeWorkInfo = () => {
    form.value.workCode = ''
    form.value.workId = ''
    form.value.workInfo = ''
    form.value.memberInfo = '-'
    form.value.feeOrgId = ''
    form.value.feeSiteId = ''
    form.value.feeOrgName = ''

    form.value.businessId = ''
    form.value.businessCode = ''
    form.value.businessType = ''
    form.value.feeList.forEach((item) => {
      item.carId = ''
      item.licenseNo = ''
      item.carModel = '-'
    })
  }
  // 选中关联工单号，回显关联业务单信息
  const changeWorkFn = (val, option) => {
    if (val) {
      form.value.feeOrgId = option.orderInfo?.siteId
      form.value.feeSiteId = option.orderInfo?.siteId
      form.value.feeOrgName = option.orderInfo?.siteName
      form.value.workCode = option.workCode

      form.value.workInfo = option.orderInfo?.orderTypeName + option.refCode || '-'
      form.value.memberInfo = option.orderInfo?.memberName + option.orderInfo?.memberPhone || '-'
      form.value.businessId = option.refId
      form.value.businessCode = option.refCode
      form.value.businessType = option.refType

      form.value.carId = option.carId
      form.value.feeList.forEach((item) => {
        item.carId = ''
        item.licenseNo = ''
        item.carModel = '-'
      })
      emit('getRefCarInfoList')
    } else {
      form.value.feeOrgId = null
      form.value.feeSiteId = null
      form.value.feeOrgName = null
      form.value.workCode = null
      form.value.workInfo = null
      form.value.memberInfo = '-'
      form.value.businessId = null
      form.value.businessCode = null
      form.value.businessType = null
    }
  }
  // 改变关联业务单类型，清空级联信息
  const changeBusinessInfo = () => {
    form.value.feeOrgId = ''
    form.value.feeSiteId = ''
    form.value.feeOrgName = ''

    form.value.businessId = ''
    form.value.businessCode = ''

    form.value.memberInfo = '-'
    form.value.feeList.forEach((item) => {
      item.carId = ''
      item.licenseNo = ''
      item.carModel = '-'
    })
  }
  // 选中关联业务单号，回显关联业务单信息
  const changeBusinessFn = (val, option) => {
    form.value.businessCode = form.value.businessType == 1 ? option.orderCode : option.orderNo
    form.value.feeOrgId = option.siteId
    form.value.feeSiteId = option.siteId
    form.value.feeOrgName = option.siteName
    form.value.memberInfo = option.memberName + option.memberPhone || '-'
    form.value.feeList.forEach((item) => {
      item.carId = ''
      item.licenseNo = ''
      item.carModel = '-'
    })
    emit('getRefCarInfoList')
  }
  //   选中费用产生门店
  const changeOrg = (val, option) => {
    form.value.feeOrgName = option.orgName
    form.value.feeSiteId = option.orgId
  }
</script>

<style lang="less" scoped></style>
